<template>
    <!--头部块：非全屏，使用container，在>992可见，从md开始设置
        在>md尺寸时可见
        在<md尺寸下隐藏hidden-sm
        width:<768 	超小屏幕 手机 xs
        width:768-992 小屏幕 平板  sm
        width:992-1200 中等屏幕 桌面显示器 md
        width:1200 大屏幕 大桌面显示器  lg
        -->
    <header class="ce_header">
        <div class="container ce_header_bar">
            <div class="row">
                <div class="col-md-2">
                    <a href="javascript:;" class="wechat_code hidden-sm hidden-xs">
                        <!--加入自定义字体：css中定义 基类 + 图标类-->
                        <span class="ce_icon ce_icon_phone"></span>
                        <span>微信公众号</span>
                        <span class="glyphicon glyphicon-menu-down"></span>
                        <div class="code_show">
                            <img class="img-responsive" src="../../../public/base/imgs/wechat_code.png" alt="">
                            <span>微信扫码·关注公众号</span>
                        </div>
                    </a>
                </div>
                <div class="serviceTel col-md-5 hidden-sm hidden-xs">
                    <!--引用bootstrap图标：基类+图标类-->
                    <span class="ce_icon ce_icon_tel"></span>
                    <a href="javascript:;">
                        <span>{{this.siteSet.phone}}</span><span>（服务时间：8:30~18:30）联系在线客服</span></a>
                </div>
                <div class="serviceTel col-md-1 hidden-sm hidden-xs ">
                    <a href="javascript:;" @click="openDialogLogin">登录咨询</a>
                </div>
                <div class="col-md-4">
                    <span class="topTitle" @click="inWechatShop">自用省·分享赚</span>
                    <button type="button" class="btn btn-danger " @click="openDialogRegister()">免费注册</button>
                    <button id="toLogin" v-if="!memberLogin" type="button" class="btn btn-link" @click="openDialogLogin()">登录
                    </button>
                    <!--<button v-if="memberLogin" type="button" class="loginName btn btn-link" @click="openMemberCenter()">
                        {{memberLogin.nickName}}
                    </button>-->
                    <div class="memberLogin" v-if="memberLogin">
                        <button id="dLabel" type="button" class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{memberLogin.nickName}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dLabel">
                            <li><button type="button" class="btn btn-link" @click="loginOut">退出登出</button></li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <dialog-login ref="dialogLogin" :showDialog="showDialog"></dialog-login>
    </header>
</template>

<script>
    import DialogLogin from "../../components/DialogLogin";

    export default {
        name: "MainHeader",
        components: {DialogLogin},
        //接收父组件传值
        props: {},
        data() {
            return {
                message: "头部组件",
                siteSet: {
                    //数据类型校验，父组件只能传入对象
                    //type:Object
                },
                fullscreenLoading: false,
                /**绑定注册模块框显示的内容：showDialog=
                 登录：STATUS_LOGIN   toLoginAcount()
                 注册：STATUS_REGISTER  toRegisterMEM
                 忘记密码：STATUS_FORGET  toForgetPWD **/
                showDialog: "",
                memberLogin: {},
            }
        },
        mounted() {
            //获取站点信息
            this.getSiteSetList();
            if(Tool.isNotEmpty(LocalStorage.get(MEMBER_LOGIN_LOCAL))){
                this.memberLogin = LocalStorage.get(MEMBER_LOGIN_LOCAL) || {};
            }else{
                this.memberLogin=Tool.getLoginMember();
            }
        },
        methods: {
            getSiteSetList() {
                //Loadings.show();
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/siteset/list').then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 10);
                    let resp = response.data;
                    if (resp.success) {
                        this.siteSet = resp.responseData[0];
                        LocalStorage.set(SITE_INFO,this.siteSet);
                    }
                });
            },
            //打开登录注册框
            openDialogLogin() {
                this.showDialog = "STATUS_LOGIN";
                this.$refs.dialogLogin.openLoginModal(this.showDialog);
            },
            openDialogRegister() {
                this.showDialog = "STATUS_REGISTER";
                this.$refs.dialogLogin.openLoginModal(this.showDialog);
            },
            inWechatShop() {
                Tool.toLink("https://www.hslbg.shop/addons/yun_shop/?menu=#/home?i=8");
            },
            setMemberLogin(memberLogin) {
                this.memberLogin = memberLogin;
            },
            //退出登录
            loginOut(){
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/member/loginout/'+this.memberLogin.token).then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 10);
                    let resp = response.data;
                    if (resp.success) {
                        LocalStorage.remove(MEMBER_LOGIN_LOCAL);
                        SessionStorage.remove(LOGIN_MEMBER);
                        Tool.setLoginMember(null);
                        let memberLogin=document.getElementsByClassName("memberLogin")[0];
                        memberLogin.style.display="none";
                        this.memberLogin=null;
                    }
                });
            }
        }
    }
</script>

<style scoped>

    /*头部样式*/
    .ce_header {
        height: 50px;
        line-height: 50px;

    }

    .ce_header .ce_header_bar {
        position: fixed;
        z-index: 1000;
        background: #ffffff;
        width: 100%;
        padding-left: 10%;
        padding-right: 10%;
        border-bottom: 1px solid #ccc;
    }

    .row {
        height: 100%;
        text-align: center;
    }

    /*前3个div+右边框*/
    .row div:nth-of-type(-n+3) {
        border-right: 1px solid #ccc;
    }

    /*二维码悬浮
    1.取消对于父级wechat的撑开，需要父级relative，子级absolute
    2.将整个div转换为block，*/
    .wechat_code {
        position: relative;
        display: block;
    }

    .code_show {
        display: none;
        min-width: 170px;
        position: absolute;
        /*top覆盖header的底部标签*/
        top: 49px;
        /*任意元素居中，默认50%*/
        left: 40%;
        transform: translateX(-45%);
        border: 1px solid #ccc;
        border-top: none;
        z-index: 999;
        background: white;
    }

    .code_show img {
        /*上下左右*/
        padding: 0px 5px;
    }

    .row div:nth-of-type(1) :hover .code_show {
        display: block;
    }

    /*修改按钮样式,最后一个按钮*/
    .row div:nth-last-of-type(1) .btn-danger {
        background: #e92322;
        border-color: #e92322;
        margin-right: 5px;
    }

    .row div:nth-last-of-type(1) .btn {
        padding: 5px 15px;
    }

    .row div:nth-last-of-type(1) .btn-link {
        color: #333;
    }

    .row div:nth-last-of-type(1) .btn-link :hover {
        text-decoration: none;
    }

    /*更新电话位置*/
    .serviceTel {
        max-height: 50px;
        overflow: hidden;
    }

    .ce_icon .glyphicon {
        display: inline-block;
        margin-right: 5px;
    }

    .sitePhone {
        /*文字省略：多行*/
        max-width: 700px;
        line-height: 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        position: relative;
    }

    /*顶部*/
    .topTitle {
        cursor: pointer;
        display: inline-block;
        font: 14px/1.5 "PingFang SC", "微软雅黑", "Microsoft YaHei", Helvetica, "Helvetica Neue", Tahoma, Arial, sans-serif;
        font-style: italic;
        border-bottom: 1px solid #e92322;
        font-weight: 700;
        font-size: 18px;
        color: #e92322;
        text-shadow: 0px 1px 0px #f6ee55, 0px 2px 0px #ffe889;
        margin-right: 20px;
        letter-spacing: 2px; /*字间距*/
    }

    .row div:nth-last-of-type(1) .btn,.row div:nth-last-of-type(1) div:last-of-type {
        padding: 2px 5px;
        border-right: 0;
    }
    /*登录/登出框*/
    .memberLogin{
        width: 30px;
        padding: 0;
        border-right: unset;
        float: right;
        margin-right: 30px;
        position: relative;
    }
    .memberLogin .btn{

    }
    /*下拉框*/
    .dropdown-menu{
        min-width: 80px;
        margin: 0;
        padding: 0;
        top: 45px;
    }
    .dropdown-menu li{
        line-height: 30px;
        text-align: center;
        color: #777777;
    }
</style>